import React from 'react';

import './pullUp.scss';

export default class extends React.Component {

    loading = false;

    done = () => this.loading = false;

    componentDidMount(){
        this.refs.pu.addEventListener('touchend', this.check);
    }

    componentWillUnmount(){
        this.refs.pu.removeEventListener('touchend', this.check);
    }

    load(){
        this.loading = true;
        _.invoke(_.invoke(this.props, 'load'), 'then', this.done);
    }

    check = () => {
        if(this.loading){
            return ;
        }
        var {pu, ft} = this.refs;
        var top = ft.getBoundingClientRect().top, bottom = pu.getBoundingClientRect().bottom, scrollTop = pu.scrollTop;
        if (top && top < bottom) {
            this.load();
        }
    };

    render(){
        var {className = '', children} = this.props;
        return (
            <div ref="pu" className={`pull-up touch ${className}`}>
                {children}
                <div ref="ft" className="pu-footer"/>
            </div>
        );
    }

}
